<template>
  <div class="w help-page">
    <h2>{{ helpDetail?.title }}</h2>
    <div class="help-wrap">
      <preview-pdf height="790px" is-height-auto :url="helpDetail.url" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  export interface HelpDosMapValue {
    title: string
    url: string
  }
  export interface HelpDosMap {
    [key: string]: HelpDosMapValue
  }

  const route = useRoute()

  const id = route.params.id as string
  const helpDetail = ref()
  const helpDosMap: HelpDosMap = {
    '1': {
      title: '算法测试功能说明书',
      url: 'https://obs-r.facebeacon.com/practical-training/pdf/help/algo-test.pdf'
    },
    '2': {
      title: '模型训练功能说明书',
      url: 'https://obs-r.facebeacon.com/practical-training/pdf/help/model-train.pdf'
    },
    '3': {
      title: '数据标注功能说明书',
      url: 'https://obs-r.facebeacon.com/practical-training/pdf/help/data-label.pdf'
    },
    'all-docs': {
      title: 'AI实验室帮助文档',
      url: 'https://obs-r.facebeacon.com/practical-training/pdf/help/data-label.pdf'
    }
  }
  helpDetail.value = helpDosMap[id] as HelpDosMapValue
  watch(
    () => route.fullPath,
    () => {
      helpDetail.value = helpDosMap[route.params.id as string] as HelpDosMapValue
    }
  )
</script>

<style lang="less" scoped>
  .help-page {
    height: 100%;

    > h2 {
      padding: 24px 0;
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
    }

    .help-wrap {
      overflow: hidden;
      width: 100%;
      height: 100%;
      background: #fff;
      border: 1px solid @border1;
      border-radius: 10px;
    }
  }
</style>
